<template>
  <div class="merchandise-categories-add views-container" v-loading="loading">
    <el-dialog
      width="45%"
      :visible.sync="dialogListVisible"
      @close="clearData"
      custom-class="reset-pwd wlm-form-dialog dialog-table"
      style="margin-top: -10vh;"
    >
      <div class="wlm-form" v-if="dialogListVisible" style="margin-bottom:0">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">{{
            formType == "1" ? "商家列表" : "门店列表"
          }}</span>
        </div>
        <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
        <div
          class="wlm-table-header"
          style="margin-bottom:-20px;margin-top:14px;"
        >
          <el-form
            :model="tableFormatData.userTable.files"
            size="small"
            label-width="110px"
            class="retail-form"
            label-position="right"
          >
            <el-form-item label="" class="filter" label-width="10px">
              <el-form-item class="search">
                <el-input
                  v-model="tableFormatData.userTable.files.name"
                  placeholder="请输入名称"
                  style="width:200px;margin-left:25px;"
                ></el-input>
                <el-button
                  style="margin-left:10px;"
                  type="primary"
                  @click="filesSerch"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :row-class-name="tableRowClassName"
          v-loading="!isTableFormatGetEnd"
          v-if="formType == '1'"
          class="chooseTable"
          :data="tableFormatData.userTable.tableData"
          :row-style="{ cursor: 'pointer' }"
          @row-click="merchantRowClick"
          highlight-current-row
          style="width: 100%;padding:0 30px;border-bottom:none"
        >
          <el-table-column prop="date" label="商家名称">
            <template slot-scope="scope">
              <p>{{ scope.row.name }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="门店数量">
            <template slot-scope="scope">
              <p>{{ scope.row.storenum }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="成为时间">
            <template slot-scope="scope">
              <p>{{ scope.row.create_time }}</p>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          ref="multipleTable"
          v-loading="!isTableFormatGetEnd"
          v-if="formType == '2'"
          class="chooseTable"
          @selection-change="storeChange"
          :data="tableFormatData.userTable.tableData"
          style="width: 100%;padding:0 30px;border-bottom:none"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="门店名称">
            <template slot-scope="scope">
              <p>{{ scope.row.name }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="店员数量">
            <template slot-scope="scope">
              <p>{{ scope.row.menum }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="成为时间">
            <template slot-scope="scope">
              <p>
                {{
                  (scope.row.create_time * 1000)
                    | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                }}
              </p>
            </template>
          </el-table-column>
        </el-table>
        <div
          class="pagination-content flex-row flex-justify-e flex-align-c"
          style="padding-right: 20px;height:60px;"
        >
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.userTable.pagination.page"
            :page-sizes="tableFormatData.userTable.pagination.pagesizes"
            :page-size.sync="tableFormatData.userTable.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="
              hasTableData ? tableFormatData.userTable.pagination.total : 0
            "
          >
          </el-pagination>
        </div>
        <!-- </el-scrollbar> -->
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button
          size="small"
          type="primary"
          @click="dialogListVisible = false"
          >确定</el-button
        >
      </footer>
    </el-dialog>

    <div class="wlm-form">
      <div class="wlm-form-header">福袋设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="basicset"
          :model="formFormatData.formData"
          size="small"
          label-width="200px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="是否开启福袋转赠" :required="true">
            <el-radio-group
              v-model="formFormatData.formData.is_give"
              @change="isgivebtn"
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="是否开启转赠限制"
            v-if="formFormatData.formData.is_give == 1"
          >
            <!-- <el-radio :label="1">每天最多转赠福卡<el-input-number v-model="formFormatData.formData.prize.is_give_sum" :controls="false" class="distribution_type_fenxiao60" style="width:60px;" :min="1" :step="1" step-strictly></el-input-number>张</el-radio> -->
            <el-radio-group v-model="formFormatData.formData.is_give_astrict">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="每天最多转赠福卡数"
            v-if="
              formFormatData.formData.is_give_astrict == 1 &&
                formFormatData.formData.is_give == 1
            "
          >
            <el-input-number
              v-model="formFormatData.formData.is_give_day"
              :controls="false"
              class="distribution_type_fenxiao150"
              style="width:150px;"
              :min="1"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="用户总共只能转赠福卡数"
            v-if="
              formFormatData.formData.is_give_astrict == 1 &&
                formFormatData.formData.is_give == 1
            "
          >
            <el-input-number
              v-model="formFormatData.formData.is_give_sum"
              :controls="false"
              class="distribution_type_fenxiao150"
              style="width:150px;"
              :min="1"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="是否开启领取福卡限制"
            v-if="
              formFormatData.formData.is_give == 1 &&
                formFormatData.formData.is_give == 1
            "
          >
            <!-- <el-radio :label="1">每天最多转赠福卡<el-input-number v-model="formFormatData.formData.prize.is_give_sum" :controls="false" class="distribution_type_fenxiao60" style="width:60px;" :min="1" :step="1" step-strictly></el-input-number>张</el-radio> -->
            <el-radio-group v-model="formFormatData.formData.is_get_astrict">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="每天最多领取福卡数"
            v-if="
              formFormatData.formData.is_get_astrict == 1 &&
                formFormatData.formData.is_give == 1
            "
          >
            <el-input-number
              v-model="formFormatData.formData.is_get_day"
              :controls="false"
              class="distribution_type_fenxiao150"
              style="width:150px;"
              :min="1"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="用户总共只能领取福卡数"
            v-if="
              formFormatData.formData.is_get_astrict == 1 &&
                formFormatData.formData.is_give == 1
            "
          >
            <el-input-number
              v-model="formFormatData.formData.is_get_sum"
              :controls="false"
              class="distribution_type_fenxiao150"
              style="width:150px;"
              :min="1"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="分享福卡标题"
            :required="true"
            v-if="formFormatData.formData.is_give == 1"
          >
            <el-input
              v-model.trim="formFormatData.formData.share_title"
            ></el-input>
            <div class="form-help">
              <div>
                可用变量：福字
                <span
                  class="pointer"
                  @click="handleClipboard('{$font_name}', $event)"
                >
                  {$font_name}
                </span>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="分享描述"
            :required="true"
            v-if="formFormatData.formData.is_give == 1"
          >
            <el-input
              v-model.trim="formFormatData.formData.share_description"
            ></el-input>
            <div class="form-help">
              <div>
                可用变量：福字描述
                <span
                  class="pointer"
                  @click="handleClipboard('{$font_description}', $event)"
                >
                  {$font_description}
                </span>
                ,福字
                <span
                  class="pointer"
                  @click="handleClipboard('{$font_name}', $event)"
                >
                  {$font_name}
                </span>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="小程序分享图"
            :required="true"
            v-if="formFormatData.formData.is_give == 1"
          >
            <choose-files
              ref="chooseFiles"
              :config="choosePlatsappConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：500*400像素</div>
          </el-form-item>
          <el-form-item
            label="公众号分享图"
            :required="true"
            v-if="formFormatData.formData.is_give == 1"
          >
            <choose-files
              ref="chooseFiles"
              :config="choosePlatwechatConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：100*100像素</div>
          </el-form-item>
          <el-form-item label="福袋样版" :required="true">
            <el-radio-group
              v-model="formFormatData.formData.type"
              @change="muBanSwitch"
            >
              <el-radio :label="1">系统福袋模板</el-radio>
              <el-radio :label="2">自定义福袋模板</el-radio>
              <el-radio :label="3">完全自定义福袋</el-radio>
            </el-radio-group>
            <div class="form-help" v-if="formFormatData.formData.type == 1">
              系统福袋模板：使用系统自带的五套模板，可以自定义福字颜色
            </div>
            <div class="form-help" v-if="formFormatData.formData.type == 2">
              自定义福袋模板：自行上传福袋获得时模板及未获得时模板，可以自定义福字颜色
            </div>
            <div class="form-help" v-if="formFormatData.formData.type == 3">
              完全自定义福袋：不能使用系统模板或自定义模板，每一个福袋需要单独上传完整模板，其中系统不会自动匹配文字，需要在每一个模板中自带文字
            </div>
          </el-form-item>
          <el-form-item
            label="福袋模板"
            v-if="
              formFormatData.formData.type == 1 ||
                formFormatData.formData.type == 2
            "
            :required="true"
          >
            <div
              v-if="formFormatData.formData.type == 1"
              style="display:flex;flex-wrap:wrap;align-items:center"
              class="imgClass"
            >
              <div
                class="borderImg"
                style="position:relative;"
                v-for="(item, index) in muBanImgList"
                :key="index"
                @click="chooseMu(item, index)"
              >
                <div style="height:110px;">
                  <img :src="item.colours_img" alt="" />
                  <img :src="item.gray_img" alt="" />
                </div>
                <div>
                  推荐福字颜色(获得时):<span
                    class="pointer"
                    @click="handleClipboard(item.font_color.have_color, $event)"
                    >{{ item.font_color.have_color }}</span
                  >
                </div>
                <div>
                  推荐福字颜色(获得时):<span
                    class="pointer"
                    @click="handleClipboard(item.font_color.no_color, $event)"
                    >{{ item.font_color.no_color }}</span
                  >
                </div>
                <img
                  v-if="currentIndex == index"
                  style="width:32px;height: 32px;position: absolute;bottom: 0;right: 0;"
                  src="../../assets/image/right-gou.png"
                  alt=""
                />
              </div>
            </div>
            <div
              v-if="formFormatData.formData.type == 2"
              style="display:flex;flex-wrap:wrap;align-items:center"
            >
              <div>
                <choose-files
                  ref="chooseFiles"
                  :config="chooseColorImg"
                  :changeEvt="formFormatFiltersChange"
                ></choose-files>
                <div class="form-help">
                  注：请上传彩色图片100*100px，且图片样式最好对称，效果更佳
                </div>
              </div>
              <div style="margin-left:20px">
                <choose-files
                  ref="chooseFiles"
                  :config="chooseGrayImg"
                  :changeEvt="formFormatFiltersChange"
                ></choose-files>
                <div class="form-help">
                  注：请上传灰色图片100*100px，且图片样式最好对称，效果更佳
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="福字颜色(获得时)"
            :required="true"
            v-if="formFormatData.formData.type != 3"
          >
            <el-color-picker
              v-model="formFormatData.formData.font_color"
            ></el-color-picker>
          </el-form-item>
          <el-form-item
            label="福字颜色(未获得时)"
            :required="true"
            v-if="formFormatData.formData.type != 3"
          >
            <el-color-picker
              v-model="formFormatData.formData.font_color_no"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="是否开启种子福" prop="address">
            <el-radio-group
              v-model="formFormatData.formData.is_special"
              :required="true"
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <p class="form-help">
              种子福：所有福都获取了才能获取设定种子福，种子福有且只有一个！
            </p>
          </el-form-item>
        </el-form>
        <div class="wlm-form">
          <div class="wlm-form-content">
            <!-- <el-table :data="formFormatData.formData.font" style="width:100%;"> -->
            <el-table
              :data="formFormatData.formData.font"
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <el-table-column
                label="种子福"
                width="100px;"
                v-if="formFormatData.formData.is_special == 1"
              >
                <template slot-scope="scope">
                  <el-switch
                    :disabled="
                      selectIndex !== null && scope.row.is_special == 0
                    "
                    :active-value="1"
                    :inactive-value="0"
                    @change="switchZhongzi(scope.$index, scope.row)"
                    v-model="scope.row.is_special"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column label="福字(限一个字)" width="200px;">
                <template slot-scope="scope">
                  <el-input
                    @change="zeroChange(scope.$index)"
                    style="width:150px"
                    size="mini"
                    maxlength="1"
                    :controls="false"
                    :min="0"
                    v-model="scope.row.name"
                    placeholder="请输入福字"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="彩色图片(获得时)"
                width="200px;"
                v-if="formFormatData.formData.type == 1"
                :key="Math.random()"
              >
                <template slot-scope="scope">
                  <img
                    style="width:100px;height:100px"
                    :src="scope.row.colours_img[0].file_path"
                    alt=""
                  />
                  <div
                    :class="'zero' + currentIndex"
                    :style="{ color: formFormatData.formData.font_color }"
                  >
                    {{ scope.row.zero || scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="灰色图片(未获得时)"
                width="200px;"
                v-if="formFormatData.formData.type == 1"
                :key="Math.random()"
              >
                <template slot-scope="scope">
                  <img
                    style="width:100px;height:100px"
                    :src="scope.row.gray_img[0].file_path"
                    alt=""
                  />
                  <div
                    :class="'zero' + currentIndex"
                    :style="{ color: formFormatData.formData.font_color_no }"
                  >
                    {{ scope.row.zero || scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="彩色图片(获得时)"
                width="200px;"
                v-if="formFormatData.formData.type == 2"
                :key="Math.random()"
              >
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.colours_img"
                    style="width:100px;height:100px"
                    :src="scope.row.colours_img[0].file_path"
                    alt=""
                  />
                  <div
                    class="zero"
                    :style="{ color: formFormatData.formData.font_color }"
                  >
                    {{ scope.row.zero || scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="灰色图片(未获得时)"
                width="200px;"
                v-if="formFormatData.formData.type == 2"
                :key="Math.random()"
              >
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.gray_img"
                    style="width:100px;height:100px"
                    :src="scope.row.gray_img[0].file_path"
                    alt=""
                  />
                  <div
                    class="zero"
                    :style="{ color: formFormatData.formData.font_color_no }"
                  >
                    {{ scope.row.zero || scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="彩色图片(获得时)"
                width="200px;"
                v-if="formFormatData.formData.type == 3"
                :key="Math.random()"
              >
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.colours_img.length > 0"
                    class="update-load"
                    :src="scope.row.colours_img[0].file_path"
                    width="100"
                    height="100"
                    @click="uploadColumnColor(scope.$index)"
                  />
                  <div
                    v-else
                    class="flex-row flex-align-c flex-justify-c update-load"
                    @click="uploadColumnColor(scope.$index)"
                  >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <!-- <div class="zero" :style="{color:formFormatData.formData.font_color}">{{scope.row.zero}}</div> -->
                </template>
              </el-table-column>
              <el-table-column
                label="灰色图片(未获得时)"
                width="200px;"
                v-if="formFormatData.formData.type == 3"
                :key="Math.random()"
              >
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.gray_img.length > 0"
                    class="update-load"
                    :src="scope.row.gray_img[0].file_path"
                    width="100"
                    height="100"
                    @click="uploadColumnGray(scope.$index)"
                  />
                  <div
                    v-else
                    class="flex-row flex-align-c flex-justify-c update-load"
                    @click="uploadColumnGray(scope.$index)"
                  >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <!-- <div class="zero" :style="{color:formFormatData.formData.font_color_no}">{{scope.row.zero }}</div> -->
                </template>
              </el-table-column>
              <el-table-column label="获得概率" width="300px;">
                <template slot-scope="scope">
                  <el-input
                    style="width:280px"
                    size="mini"
                    :controls="false"
                    :min="0"
                    v-model="scope.row.probability"
                    placeholder="获得概率0.1=10%，0.01=1%，0.001=0.1%"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="排序(数值越小越靠前)" width="200px;">
                <template slot-scope="scope">
                  <el-input
                    style="width:150px"
                    size="mini"
                    :controls="false"
                    :min="0"
                    v-model="scope.row.blessing_sort"
                    placeholder="请输入排序"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="福卡描述" width="200px;">
                <template slot-scope="scope">
                  <el-input
                    style="width:150px"
                    size="mini"
                    :controls="false"
                    :min="0"
                    v-model="scope.row.description"
                    placeholder="请输入福卡描述"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column v-if="formFormatData.formData.is_update !=1" label="操作" width="200px;">
                            <template slot-scope="scope">
                                <el-button type="text" @click="delbtn(scope)" size="small">删除</el-button>
                            </template>
                        </el-table-column> -->
              <el-table-column label="操作" width="200px;">
                <template slot-scope="scope">
                  <el-button type="text" @click="delbtn(scope)" size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <choose-files
              ref="chooseFilesColor"
              :config="chooseFilesImageColor"
              :changeEvt="uploadChangeColor"
              style="display:none;"
            ></choose-files>
            <choose-files
              ref="chooseFilesGray"
              :config="chooseFilesImageGray"
              :changeEvt="uploadChangeGray"
              style="display:none;"
            ></choose-files>
            <el-button type="primary" @click="tagbtn">添加福袋</el-button>
            <div style="margin-top:20px; color:#bbb;">
              福袋最多设置8个，移动端一排显示4个排两行,按排序值升序排列。福字不能使用相同文字。获得概率0.1=10%，0.01=1%，0.001=0.1%...，最终福字获得概率是由每个福字的设置获得概率占总福字设置获得概率总和的比例进行计算出最终得奖概率
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="saveForm" type="primary" :loading="butt"
        >保存</el-button
      >
      <router-link tag="span" to="/application/blessingBag">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import {
  getUserTag,
  couponEasyList,
  blessingSettingSave,
  blessingSystemTemplate,
  blessingSettingDetail
} from "@/api/application";
import { servicesList, shopIndex } from "@/api/merchant";
import clipboard from "@/utils/clipboard";
import ChooseGoods from "@/components/ChooseGoods/index";
import ChooseFiles from "@/components/ChooseFiles/index";
import ueditor from "@/components/Ueditor/index";
import { Base64 } from "js-base64";
import { businessIndex } from "@/api/merchant";
import mixins from "@/mixins/mixins";
export default {
  mixins: [mixins.getters("Form"), mixins.getters("Table")],
  components: {
    ChooseGoods,
    ChooseFiles,
    ueditor
  },
  created() {
    this.$nextTick(() => {
      // this.communitybtn()
      // this.luckcrowdbtn()
      this.getblessingSystemTemplate();
      // this.chooseMu()
      // this.coupontableList()
      if (this.$route.query.blessing_id) {
        this.praiseDetailbtn();
        this.formFormatData.formData.blessing_id = this.$route.query.blessing_id;
      }
    });
  },
  data() {
    return {
      selectIndex: null,
      huiIndex: "",
      caiIndex: "",
      fileId: "",
      colorImg: "",
      grayImg: "",
      currentIndex: 0,
      muBanImgList: [],
      value2: true,
      color1: "#eeeeee",
      loading: false,
      butt: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      lastID: -1,
      options: [],
      selectValue: [],
      isFirst: false,
      ueditorList: [],
      defaultMsg1: "",
      currentRow: [],
      $lineIndex: -1,
      formType: "1",
      dialogListVisible: false,
      couponTypeList: [],
      // 选择商品参数
      chooseGoodsConfig: {
        type: ["chooseGoods"],
        model: "normal",
        unique: false,
        thumbtn: "thumbtns"
      },
      // 选择图片
      chooseFilesImageGray: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isUnique: true,
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "gray_img",
          model: "img"
        }
      },
      chooseFilesImageColor: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isUnique: true,
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "colours_img",
          model: "img"
        }
      },
      choosePlatsappConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isShowList: true,
        initList: [],
        file_type: "image",
        bindKey: {
          key: "sapp_img",
          model: "img"
        }
      },
      choosePlatwechatConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isShowList: true,
        initList: [],
        file_type: "image",
        bindKey: {
          key: "wechat_img",
          model: "img"
        }
      },
      chooseColorImg: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isShowList: true,
        initList: [],
        file_type: "image",
        bindKey: {
          key: "colours_img",
          model: "img"
        }
      },
      chooseGrayImg: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isShowList: true,
        initList: [],
        file_type: "image",
        bindKey: {
          key: "gray_img",
          model: "img"
        }
      },
      tableFormatData: {
        current: "userTable",
        userTable: {
          key: "userTable",
          api: {
            getList: businessIndex
          },
          tableData: [],
          periods: [],
          files: {
            name: "",
            bus_id: "",
            ids: [],
            checkall: "0",
            Recycle: "1",
            blessing_id: this.$route.query.blessing_id
              ? this.$route.query.blessing_id
              : ""
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      },
      formFormatData: {
        key: ["basicset", "active"],
        api: {
          editForm: {
            api: blessingSettingDetail,
            params: {
              blessing_id: ""
            },
            redirect: "blessing_id",
            filters: {
              img: {
                bindInit: [
                  "choosePlatsappConfig",
                  "choosePlatwechatConfig",
                  "chooseColorImg",
                  "chooseGrayImg"
                ]
              },
              choose: {
                bindInit: ["chooseGoodsConfig"]
              }
            }
          }
          //   submitForm:praiseSave
        },
        formData: {
          blessing_id: "",
          is_give: 0,
          type: 1,
          is_give_astrict: 0,
          is_give_sum: "",
          is_give_day: "",
          is_get_sum: "",
          is_get_day: "",
          is_get_astrict: 0,
          is_give_sum: "",
          font_color: "",
          font_color_no: "",
          share_description: "",
          share_title: "",
          wechat_img: [],
          sapp_img: [],
          colours_img: [],
          gray_img: [],
          is_special: 0,
          font: [],
          is_update: ""
        }
      }
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isFirst = true;
      }, 500);
    });
  },
  methods: {
    isgivebtn() {
      console.log("ssssss", this.formFormatData.formData.wechat_img);
      //切换时置空数据
      this.formFormatData.formData.is_give_astrict = 0;
      this.formFormatData.formData.is_give_day = "";
      this.formFormatData.formData.is_give_sum = "";
      this.formFormatData.formData.is_get_astrict = 0;
      this.formFormatData.formData.is_get_day = "";
      this.formFormatData.formData.is_get_sum = "";
      this.formFormatData.formData.share_title = "";
      this.formFormatData.formData.share_description = "";
      //置空图片
      this.choosePlatsappConfig.initList = [];
      this.choosePlatwechatConfig.initList = [];
    },
    handleClipboard(text, event) {
      clipboard(text, event);
    },
    zeroChange(index) {
      this.formFormatData.formData.font[
        index
      ].zero = this.formFormatData.formData.font[index].name;
    },
    switchZhongzi(index, row) {
      if (row.is_special == 1) {
        this.selectIndex = row.index;
      } else {
        this.selectIndex = null;
      }
    },
    //获取系统模板图
    getblessingSystemTemplate() {
      blessingSystemTemplate().then(res => {
        if (res.data.code == 1) {
          this.muBanImgList = res.data.data;
        }
      });
    },
    chooseMu(item, index) {
      console.log("66666666666666666666666", item, index);
      this.currentIndex = index;
      this.colorImg = item.colours_img || this.muBanImgList[index].colours_img;
      this.grayImg = item.gray_img || this.muBanImgList[index].gray_img;
      this.fileId = item.id || this.muBanImgList[index].id;
      this.formFormatData.formData.font_color = item.font_color.have_color;
      this.formFormatData.formData.font_color_no = item.font_color.no_color;

      //this.formFormatData.formData.font = []
      // this.formFormatData.formData.font.forEach(item1 => {
      //     item1.colours_img = item.colours_img;
      //     item1.gray_img = item.gray_img;
      // })
      if (this.formFormatData.formData.font.length > 0) {
        this.formFormatData.formData.font.forEach(item => {
          console.log("ssssss", item);
          item.colours_img[0].file_path = this.colorImg;
          item.colours_img[0].file_id = this.fileId;
          item.gray_img[0].file_path = this.grayImg;
          item.gray_img[0].file_id = this.fileId;
        });
      }
    },
    muBanSwitch() {
      this.currentIndex = 0;
      this.formFormatData.formData.font = [];
      //切换福袋样板时福字颜色置空，当是系统福袋模版时，默认第一个颜色
      if (
        this.formFormatData.formData.type == 2 ||
        this.formFormatData.formData.type == 3
      ) {
        this.formFormatData.formData.font_color = "";
        this.formFormatData.formData.font_color_no = "";
      } else {
        this.formFormatData.formData.font_color = this.muBanImgList[0].font_color.have_color;
        this.formFormatData.formData.font_color_no = this.muBanImgList[0].font_color.no_color;
      }

      console.log(this.muBanImgList, "4444");
    },
    //   添加标签
    tagbtn() {
      // if (this.is_update == 1) {
      //     this.$message.error('编辑中不能添加！')
      // } else {

      // }

      if (this.formFormatData.formData.type == 1) {
        if (this.formFormatData.formData.font.length > 7) {
          this.$message({
            type: "info",
            message: "最多添加8个!"
          });
        } else {
          console.log("this.colorImg", this.colorImg);
          this.formFormatData.formData.font.push({
            zero: "",
            description: "",
            name: "",
            colours_img: [
              {
                file_path:
                  this.colorImg ||
                  this.muBanImgList[this.currentIndex].colours_img,
                file_id: this.fileId
              }
            ],
            gray_img: [
              {
                file_path:
                  this.grayImg || this.muBanImgList[this.currentIndex].gray_img,
                file_id: this.fileId
              }
            ],
            blessing_sort: "",
            is_special: false,
            probability: ""
          });
        }
      } else if (this.formFormatData.formData.type == 2) {
        if(this.formFormatData.formData.font.length > 7){
             this.$message({
            type: "info",
            message: "最多添加8个!"
          });
        }else{
            if (
          this.formFormatData.formData.colours_img &&
          this.formFormatData.formData.gray_img
        ) {
          this.formFormatData.formData.font.push({
            zero: "",
            description: "",
            name: "",
            colours_img: this.formFormatData.formData.colours_img,
            gray_img: this.formFormatData.formData.gray_img,
            blessing_sort: "",
            is_special: false,
            probability: ""
          });
        } else {
          this.$message.error("请上传图片模板！");
        }
        }
      } else if (this.formFormatData.formData.type == 3) {
        this.formFormatData.formData.font.push({
          zero: "",
          description: "",
          name: "",
          colours_img: [],
          gray_img: [],
          blessing_sort: "",
          is_special: false,
          probability: ""
        });
      }
    },
    praiseDetailbtn() {
      this.loading = true;
      this.butt = true;
      blessingSettingDetail({
        blessing_id: this.$route.query.blessing_id
      }).then(res => {
        console.log("res-------------------", res.data.data.sapp_img);
        if (res.data.code == 1) {
          if (res.data.data.is_update == 1) {
            this.is_update = res.data.data.is_update;
            this.formFormatData.formData = res.data.data;
            this.currentIndex = this.formFormatData.formData.template - 1 || 0;

            //小程序，公众号图片回显
            this.choosePlatsappConfig.initList = res.data.data.sapp_img;
            this.formFormatData.formData.sapp_img = res.data.data.sapp_img;
            this.choosePlatwechatConfig.initList = res.data.data.wechat_img;
            this.formFormatData.formData.wechat_img = res.data.data.wechat_img;

            if (this.formFormatData.formData.type == 1) {
              this.colorImg = this.formFormatData.formData.font[0].colours_img[0].file_path;
              this.grayImg = this.formFormatData.formData.font[0].gray_img[0].file_path;
              this.fileId = this.formFormatData.formData.font[0].gray_img[0].file_id;
            }
          }
          this.loading = false;
          this.butt = false;
        }
      });
    },
    superpositionbtn(is_superposition) {
      if (is_superposition == 1) {
        this.$confirm(
          "开启叠加后相应的奖品可以叠加获取，例如点赞数50且开启叠加，点赞数60开启叠加，那么点赞数达60时可以叠加获取点赞数50和60的两个奖品；点赞数50且开启叠加，点赞数60不开启叠加，点赞数70开启叠加，那么点赞数达60可以获取点赞数50，60两个奖品，点赞数达70可以获取点赞数50，70两个奖品，以此类推",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass: "superposition"
          }
        )
          .then(() => {})
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    delMeal(index) {
      if (this.$route.query.status == 1) {
        this.$confirm(
          "正在进行中的活动删除优惠券后会对参与的用户造成影响?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.formFormatData.formData.coupon.splice(index, 1);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        if (this.formFormatData.formData.coupon.length < 2) {
          return this.$message.error("操作失败！,至少保留一项");
        } else {
          this.formFormatData.formData.coupon.splice(index, 1);
        }
      }
    },
    //请求优惠券接口
    coupontableList() {
      couponEasyList().then(res => {
        console.log("9888888888888888", res.data.data);
        this.couponTypeList = res.data.data;
      });
    },
    deleteGiftTable(scope) {
      if (this.$route.query.status == 1) {
        this.$confirm(
          "正在进行中的活动删除奖品后会对参与的用户造成影响?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.formFormatData.formData.prize.splice(scope.$index, 1);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.formFormatData.formData.prize.splice(scope.$index, 1);
      }
    },
    storeChange(val) {
      this.formFormatData.formData.prize[this.$lineIndex]["store_ids"] = [];
      val.map(item => {
        this.formFormatData.formData.prize[this.$lineIndex]["store_ids"].push({
          id: item.id,
          name: item.name
        });
      });
    },
    showDialogSetDoor(data, bus_id) {
      this.$lineIndex = data;
      this.formType = "2";
      this.tableFormatData.userTable.files.bus_id = bus_id;
      this.tableFormatData.userTable.api.getList = shopIndex;
      this.filesSerch();
      this.dialogListVisible = true;
    },
    clearData() {
      this.lastID = -1;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.storenum === 0) {
        return "disable-row";
      }
      return "";
    },
    merchantRowClick(row) {
      if (this.lastID !== row.id) {
        this.lastID = row.id;
        if (row.storenum === 0) {
          console.log("22");
          this.$message({
            message: "该商家没有门店~",
            type: "warning"
          });
        } else {
          const tableItem = this.formFormatData.formData.prize[this.$lineIndex];
          tableItem["bus_id"] = row.id;
          tableItem["business_name"] = row.name;
          tableItem["store_ids"] = [];
          this.formFormatData.formData.prize.splice(
            this.$lineIndex,
            1,
            tableItem
          );
        }
      }
    },
    showDialogSet(data) {
      this.$lineIndex = data;
      this.formType = "1";
      this.tableFormatData.userTable.api.getList = businessIndex;
      this.filesSerch();
      this.dialogListVisible = true;
    },
    //删除标签设置数据
    delbtn(scope) {
      this.formFormatData.formData.font.splice(scope.$index, 1);
    },
    shopInfoChange(msg) {
      this.defaultMsg1 = msg;
    },
    formFormatCallBack(data, type, response) {
      if (type === "editForm") {
        const { content } = data;
        this.defaultMsg1 = content;
      }
    },
    //请求社群接口
    communitybtn() {
      servicesList({
        list_rows: "all"
      }).then(res => {
        this.selectValue = res.data.data;
      });
    },
    // 点击标签用户请求接口
    luckcrowdbtn() {
      getUserTag().then(res => {
        const {
          data: { data: msgData = [] }
        } = res;
        this.options = msgData;
      });
    },
    //控制商品弹出框的显示
    goodsToogle() {
      this.$refs.chooseGoods.toggle();
    },
    //   增加优惠券礼品项
    addPrizeClick() {
      let obj = {
        praise_number: "",
        coupon_id: "",
        count: ""
      };
      this.formFormatData.formData.coupon.push(obj);
    },
    //   构造商品信息
    filtersChange(val) {
      this.currentRow = val.currentRow;
      const displayData = val.displayData;
      const result = [];
      displayData.map(item => {
        const newData = {
          image: [
            {
              file_path: item.image[0]["file_path"]
            }
          ],
          goods_name: item.goods_name,
          goods_id: item.goods_id,
          stock_num: item.stock,
          goods_price: item.goods_min_price
        };
        result.push({
          goods: newData,
          goods_id: item.goods_id
        });
      });
      this.formFormatData.formData.goods = result;
    },
    //  删除选中的商品
    deleteTable(scope) {
      this.formFormatData.formData.goods.splice(scope.$index, 1);
      this.currentRow.splice(scope.$index, 1);
    },
    // 点击图片出现弹窗
    uploadChangeGray({ displayData = [] }) {
      this.formFormatData.formData.font[this.huiIndex].gray_img = displayData;
      console.log(this.formFormatData.formData, "123454");

      this.$forceUpdate();
      //this.formFormatData.formData.prize[this.$index].image = displayData
    },
    uploadChangeColor({ displayData = [] }) {
      this.formFormatData.formData.font[
        this.caiIndex
      ].colours_img = displayData;
      this.$forceUpdate();
    },
    uploadColumnGray(index) {
      this.$refs.chooseFilesGray.toggle();
      this.huiIndex = index;
    },
    uploadColumnColor(index) {
      this.$refs.chooseFilesColor.toggle();
      this.caiIndex = index;
    },
    //点击保存按钮
    saveForm() {
      //this.butt = true
      const data = Base64.encode(JSON.stringify(this.formFormatData.formData));
      console.log(
        "ssssssssssssss+++++++++++++++++++++",
        this.formFormatData.formData
      );
      if (this.formFormatData.formData.font.length < 2) {
        return this.$message.error("最少添加2个福袋，最多添加8个福袋！");
      }
      //判断是否是编辑
      if (this.$route.query.blessing_id) {
        blessingSettingSave({
          data
        })
          .then(res => {
            const {
              data: { code, msg }
            } = res;
            if (code == 1) {
              this.butt = false;
              this.$message({
                type: "success",
                message: "修改成功!"
              });
              this.$router.push("/application/blessingBag");
            } else {
              this.butt = false;
              this.$message.error(msg);
            }
          })
          .finally(() => {
            this.butt = false;
          });
      } else {
        blessingSettingSave({
          data
        })
          .then(res => {
            const {
              data: { code, msg }
            } = res;
            if (code == 1) {
              this.butt = false;
              this.$message({
                type: "success",
                message: "保存成功!"
              });
              this.$router.push("/application/blessingBag");
            } else {
              this.butt = false;
              this.$message.error(msg);
            }
          })
          .finally(() => {
            this.butt = false;
          });
      }
      // if(this.$route.query.status=3){
      //     this.$message.error('活动已结束，无法进行保存！')
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.zero {
  width: 20px;
  position: absolute;
  top: 50px;
  left: 48px;
  font-size: 25px;
}
.zero0 {
  width: 20px;
  position: absolute;
  top: 50px;
  left: 45px;
  font-size: 25px;
}
.zero1 {
  width: 20px;
  position: absolute;
  top: 40px;
  left: 48px;
  font-size: 25px;
}
.zero2 {
  width: 20px;
  position: absolute;
  top: 60px;
  left: 48px;
  font-size: 25px;
}
.zero3 {
  width: 20px;
  position: absolute;
  top: 48px;
  left: 48px;
  font-size: 25px;
}
.zero4 {
  width: 20px;
  position: absolute;
  top: 48px;
  left: 48px;
  font-size: 25px;
}

.borderImg {
  padding: 20px;
  margin-right: 20px;
  box-sizing: border-box;
}

.imgClass > div:nth-child(1) img {
  // width: 59px;
  height: 100px;
}

.imgClass > div:nth-child(2) img {
  // width: 100px;
  height: 100px;
}

.imgClass > div:nth-child(3) img {
  // width: 93px;
  height: 100px;
}

.imgClass > div:nth-child(4) img {
  // width: 100px;
  height: 100px;
}

.imgClass > div:nth-child(5) img {
  // width: 100px;
  height: 100px;
}

$update: 100px;

.update-load {
  display: inline-block;
  cursor: pointer;
  width: $update;
  height: $update;
  background: #fafbff;
  border: 1px dashed #c0ccda;
  color: #a8abb0;
  border-radius: 5px;

  i {
    font-size: 14px;
    color: #8c939d;
    width: $update;
    height: $update;
    line-height: $update;
    text-align: center;
  }

  .el-select-dropdown {
    max-width: 243px;
  }

  .el-select-dropdown__item {
    display: inline-block;
  }

  .el-select-dropdown__item span {
    min-width: 205px;
    display: inline-block;
  }
}
</style>
